<template>
  <div class="bg">

    <div class="header">
      <h1>事件可视化分析</h1>

      <el-select v-model="eventId" placeholder="请选择事件" clearable class="show-time">
        <el-option v-for="dict in events"
                   :key="dict.eventId"
                   :label="dict.eventTitle"
                   :value="dict.eventId"
                   style="width: 100%"/>
      </el-select>

    </div>

    <!-- 页面主体 -->
    <section class="mainbox">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel bar2">
          <h2>最新舆情</h2>
          <div class="chart">

            <div class="zuixin" v-for="(opinion,index) in latestPublicOpinions" :key="index">
              <div class="pulll_left">{{opinion.publishTime}}</div>
              <div class="pulll_center" v-if="opinion.ispositive === 1" style="color: green">正面</div>
              <div class="pulll_center" v-else-if="opinion.isnegative === 1" style="color: red">负面</div>
              <div class="pulll_center" v-else-if="opinion.isneutral === 1" style="color: grey">中性</div>
              <div class="pulll_right"> {{removeHtmlTags(opinion.title)}}</div>
            </div>

          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>正负面信息趋势图
          </h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <h2>热词云图</h2>
          <div class="chart">
            <WordCloudTransparentBackground :hots="hotWords" style="height: 100%" :optionTitleText="''"/>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="column">
        <!-- 头部 no模块 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>{{relatedInformation}}</li>
              <li>{{positive}}</li>
              <li>{{negative}}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>

              <li>相关信息</li>
              <li>正面舆情</li>
              <li>负面舆情</li>
            </ul>
          </div>
        </div>
        <!-- map模块 -->
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart">
            <MapChinaChartTransparentBackground style="height: 100%"
                                                :data="chinaOpinions"></MapChinaChartTransparentBackground>

          </div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="column">
        <div class="panel bar">
          <h2>意见领袖榜</h2>
          <!-- 图表放置盒子 -->
          <div class="chart"></div>
          <!-- 伪元素绘制盒子下边角 -->
          <div class="panel-footer"></div>
        </div>

        <div class="panel line2">
          <h2>信息载体趋势图</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie2">
          <h2>媒体分布</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>


  </div>


</template>


<script>
  import "./js/flexible.js"
  import "./js/china.js"
  import * as echarts from 'echarts'
  import {
    listEventsAll,
    getSentimentByPublishTimeByEventId,
    getMediaTypeByPublishTimeByEventId,
    getAllInformation,
    getKeywordsByEventId,
    getPublicOpinionCountGroupByProvinceOfEventId,
    queryByEventParameter,
    countSensitiveOpinionByMediaName,
    countSensitiveAuthorOpinion
  } from "@/api/system/event";
  import WordCloudTransparentBackground from '@/components/Echarts/WordCloudTransparentBackground'
  import MapChinaChartTransparentBackground from '@/components/Echarts/MapChinaChartTransparentBackground'

  export default {
    name: 'Home',
    components: {
      WordCloudTransparentBackground,
      MapChinaChartTransparentBackground,
    },
    data() {
      return {
        allNum: 0,
        positive: 0,
        negative: 0,
        relatedInformation: 0,
        title: "数据大屏",
        events: [],
        eventId: null,
        loading: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 100
        },
        myChartOpinionLeaders: null,
        opinionLeadersOption: {
          color: ['#2f89cf'],
          // 提示框组件
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          // 修改图表位置大小
          grid: {
            left: '0%',
            top: '10px',
            right: '0%',
            bottom: '4%',
            containLabel: true
          },
          // x轴相关配置
          xAxis: [{
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            },
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.8)",
              fontSize: 10
            },
            // x轴样式不显示
            axisLine: {
              show: false
            }
          }],
          // y轴相关配置
          yAxis: [{
            type: 'value',
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.6)",
              fontSize: 12
            },
            // y轴样式修改
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.6)",
                width: 2
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            }
          }],
          // 系列列表配置
          series: [{
            name: '舆情数量',
            type: 'bar',
            barWidth: '35%',
            // ajax传动态数据
            data: [],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }]
        },
        myChartMostActive: null,
        myColor: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
        mostActiveOption: {
          grid: {
            top: "10%",
            left: '22%',
            bottom: '10%',
            // containLabel: true
          },
          xAxis: {
            // 不显示x轴相关信息
            show: false
          },
          yAxis: [{
            type: 'category',
            // y轴数据反转，与数组的顺序一致
            inverse: true,
            // 不显示y轴线和刻度
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // 将刻度标签文字设置为白色
            axisLabel: {
              color: "#fff"
            },
            data: [70, 34, 60, 78, 69]
          }, {
            // y轴数据反转，与数组的顺序一致
            inverse: true,
            show: true,
            // 不显示y轴线和刻度
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // 将刻度标签文字设置为白色
            axisLabel: {
              color: "#fff"
            },
            data: [702, 350, 610, 793, 664]
          }],
          series: [{
            // 第一组柱子（条状）
            name: '条',
            type: 'bar',
            // 柱子之间的距离
            barCategoryGap: 50,
            // 柱子的宽度
            barWidth: 10,
            // 层级 相当于z-index
            yAxisIndex: 0,
            // 柱子更改样式
            itemStyle: {
              barBorderRadius: 20,
              // 此时的color可以修改柱子的颜色
              color: function (params) {
                // params 传进来的是柱子的对象
                // dataIndex 是当前柱子的索引号
                // console.log(params);
                return ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"][params.dataIndex];
              }
            },
            data: [70, 34, 60, 78, 69],
            // 显示柱子内的百分比文字
            label: {
              show: true,
              position: "inside",
              // {c} 会自动解析为数据（data内的数据）
              formatter: "{c}%"
            }
          },
            {
              // 第二组柱子（框状 border）
              name: '框',
              type: 'bar',
              // 柱子之间的距离
              barCategoryGap: 50,
              // 柱子的宽度
              barWidth: 14,
              // 层级 相当于z-index
              yAxisIndex: 1,
              // 柱子修改样式
              itemStyle: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 2,
                barBorderRadius: 15,
              },
              data: [100, 100, 100, 100, 100]
            }
          ]
        },
        myChartSentiments: null,
        sentimentsOption: {
          // 修改两条线的颜色
          color: ['#00f2f1', '#ed3f35', '#8B78F6'],
          tooltip: {
            trigger: 'axis'
          },
          // 图例组件
          legend: {
            // 当serise 有name值时， legend 不需要写data
            // 修改图例组件文字颜色
            textStyle: {
              color: '#4c9bfd'
            },
            right: '10%',
          },
          grid: {
            top: "20%",
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            show: true, // 显示边框
            borderColor: '#012f4a' // 边框颜色
          },
          xAxis: {
            type: 'category',
            boundaryGap: false, // 去除轴间距
            data: [],
            // 去除刻度线
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#4c9bfb" // x轴文本颜色
            },
            axisLine: {
              show: false // 去除轴线
            }
          },
          yAxis: {
            type: 'value',
            // 去除刻度线
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#4c9bfb" // x轴文本颜色
            },
            axisLine: {
              show: false // 去除轴线
            },
            splitLine: {
              lineStyle: {
                color: "#012f4a"
              }
            }
          },
          series: []
        },
        myChartMediaType: null,
        mediaTypeOption: {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            top: "0%",
            textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: "12"
            }
          },
          grid: {
            top: '30',
            left: '10',
            right: '30',
            bottom: '10',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)"
              }
            },
            data: []
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              // 不显示刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
            // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }],
          series: []
        },
        hotWords: [{name: "暂无数据", value: 1}],
        maxOpinionCountChina: 0,
        chinaOpinions: [],
        latestPublicOpinions: [],
        myChartMediaName: null,
        optionMediaName: {
          color: ['#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            bottom: 0,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: 10
            }
          },
          series: [{
            name: '媒体分布',
            type: 'pie',
            radius: ["10%", "60%"],
            center: ['50%', '40%'],
            // 半径模式  area面积模式
            roseType: 'radius',
            // 图形的文字标签
            label: {
              fontsize: 10
            },
            // 引导线调整
            labelLine: {
              // 连接扇形图线长(斜线)
              length: 6,
              // 连接文字线长(横线)
              length2: 8
            },
            data: []
          }]
        }
      }
    },
    watch: {
      eventId(newValue, oldValue) {
        console.log("newValue:", newValue)
        if (newValue !== null && newValue !== undefined && newValue !== '') {
          this.getData();
        }
      }
    },
    methods: {
      removeHtmlTags(text) {
        const regex = /<[^>]+>/g;
        return text.replace(regex, '');
      },
      getData() {
        this.countSensitiveAuthorOpinion();
        this.getSentimentByPublishTimeByEventId()
        this.getMediaTypeByPublishTimeByEventId()
        this.getAllInformation()
        this.getKeywordsByEventId()
        this.getPublicOpinionCountGroupByProvinceOfEventId()
        this.getOpinionById()
        this.countSensitiveOpinionByMediaName()

      },
      countSensitiveOpinionByMediaName() {
        countSensitiveOpinionByMediaName({
          eventId: this.eventId,
        }).then(response => {
          let mediaNameSensitive = response.rows
          mediaNameSensitive.forEach(m => {
            let obj = {
              name: m.mediaName,
              value: m.positive + m.negative + m.neutral
            }
            this.optionMediaName.series[0].data.push(obj)
          })
          this.myChartMediaName.setOption(this.optionMediaName);
        });
      },
      /** 查询舆情清单列表 */
      getOpinionById() {

        queryByEventParameter({
          eventId: this.eventId
        }, {
          pageNum: 1,
          pageSize: 7,
        }).then(response => {
          this.latestPublicOpinions = response.rows;
        });
      },
      getPublicOpinionCountGroupByProvinceOfEventId() {
        getPublicOpinionCountGroupByProvinceOfEventId({
          eventId: this.eventId,
        }).then(response => {
          //国内舆情
          let mapDatas = response.data
          this.maxOpinionCountChina = 0
          mapDatas.forEach((item) => {
            this.maxOpinionCountChina = item.value > this.maxOpinionCountChina ? item.value : this.maxOpinionCountChina
            let str = item.name;
            if (str.includes("省")) {
              str = str.replace("省", "");
            }
            let obj = {
              name: str,
              value: item.value,
            }
            this.chinaOpinions.push(obj)
          })
        });
      },
      getKeywordsByEventId() {
        getKeywordsByEventId({
          eventId: this.eventId,
        }).then(response => {
          if (response.rows != undefined && response.rows.length > 0) {
            this.hotWords = response.rows;
          } else {
            this.hotWords = [{name: "暂无数据", value: 1}];
          }
          console.log(this.hotWords)
        });
      },
      getAllInformation() {
        getAllInformation({
          eventId: this.eventId,
        }).then(response => {
          this.allNum = response.data.allNum
          this.positive = response.data.positive
          this.negative = response.data.negative
          this.relatedInformation = response.data.relatedInformation
        })
      },
      getMediaTypeByPublishTimeByEventId() {
        getMediaTypeByPublishTimeByEventId({
          eventId: this.eventId,
        }).then(response => {
          //信息载体趋势图
          let list = response.rows
          var xAxisData = [];
          var legendData = [];
          var seriesData = [];

// 获取legendData
          for (var i = 0; i < list.length; i++) {
            var row = list[i];
            // 添加日期到xAxisData数组
            xAxisData.push(row.name);
            // 获取legendData
            for (var j = 0; j < row.value.length; j++) {
              var value = row.value[j];
              // 添加value.name到legendData数组
              if (!legendData.includes(value.name)) {
                legendData.push(value.name);
              }
            }
          }

          // 遍历list数组
          for (var i = 0; i < list.length; i++) {
            var row = list[i];
            for (let k = 0; k < legendData.length; k++) {
              //获取媒体类型
              let mediaName=legendData[k];

              // 查找对应的series对象
              var getMediaName = row.value.find(function (obj) {
                return obj.name === mediaName;
              });

              if (!getMediaName) {
                let obj={
                  name:mediaName,
                  value:0
                }
                row.value.push(obj)
              }
            }

            // 遍历row.value数组
            for (let j = 0; j < row.value.length; j++) {
              let value = row.value[j];

              // 查找对应的series对象
              let seriesObj = seriesData.find(function (obj) {
                return obj.name === value.name;
              });

              // 如果找不到对应的series对象，则创建一个新的series对象
              if (!seriesObj) {
                seriesObj = {
                  name: value.name,
                  type: 'line',
                  data: []
                };
                seriesData.push(seriesObj);
              }
              // 添加value.value到seriesObj的data数组中
              seriesObj.data.push(value.value);
            }


          }

// 创建series数组
          var series = [];
          for (var i = 0; i < seriesData.length; i++) {
            var data = seriesData[i];

            // 创建series对象
            var seriesObj = {
              name: data.name,
              type: 'line',
              // stack: 'Total',
              data: data.data
            };

            // 将seriesObj添加到series数组中
            series.push(seriesObj);
          }

          console.log("媒体：",xAxisData);
          console.log("媒体：",legendData);
          console.log("媒体：",series);

          this.mediaTypeOption.xAxis[0].data = xAxisData
          this.mediaTypeOption.series = series
          this.myChartMediaType.setOption(this.mediaTypeOption);

        });
      },
      getSentimentByPublishTimeByEventId() {
        getSentimentByPublishTimeByEventId({
          eventId: this.eventId,
        }).then(response => {

          this.sentimentsOption.series = []
          this.sentimentsOption.xAxis.data = []
          let list = response.rows
          let zm = {
            name: '正面',
            type: 'line',
            smooth: true, // 圆滑的线
            data: [],
            // lineStyle: {
            //   "color": "#ee6666",
            //   // "width": 4,
            //   // "type": "dashed"
            // },
          }
          let zx = {
            name: '中性',
            type: 'line',
            data: [],
            // lineStyle: {
            //   "color": "#3ba272",
            // },
          }
          let fm = {
            name: '负面',
            type: 'line',
            data: [],
            // lineStyle: {
            //   "color": "#0c71e0",
            // },
          }
          let zmlist = []
          let zxlist = []
          let fmlist = []
          list.forEach(item => {
            this.sentimentsOption.xAxis.data.push(item.name);
            let zmnum = 0
            let zxnum = 0
            let fmnum = 0
            item.value.forEach(i => {
              if (i.name == 'ispositive') {
                zmnum = i.value
              }
              if (i.name == 'isneutral') {
                zxnum = i.value
              }
              if (i.name == 'isnegative') {
                fmnum = i.value
              }
            })
            zmlist.push(zmnum)
            zxlist.push(zxnum)
            fmlist.push(fmnum)
          })
          zm.data = zmlist
          zx.data = zxlist
          fm.data = fmlist
          this.sentimentsOption.series.push(zm)
          this.sentimentsOption.series.push(zx)
          this.sentimentsOption.series.push(fm)

          this.myChartSentiments.setOption(this.sentimentsOption);
        });
      },

      countSensitiveAuthorOpinion() {
        countSensitiveAuthorOpinion({
          eventId: this.eventId,
        }).then(response => {
          this.opinionLeadersOption.xAxis[0].data = []
          this.opinionLeadersOption.series[0].data = []
          response.rows.forEach((item, index) => {
            if (index < 8 && item.author !== '') {
              this.opinionLeadersOption.xAxis[0].data.push(item.author)
              this.opinionLeadersOption.series[0].data.push(item.count)
            }
          })
          this.myChartOpinionLeaders.setOption(this.opinionLeadersOption);
        })
      },
      /** 查询事件列表 */
      getEventsList() {
        this.loading = true;
        listEventsAll(this.queryParams).then(response => {
          this.events = response.rows;
          if (this.events.length > 0) {
            this.eventId = this.events[0].eventId
          }
          this.loading = false;
        });
      },
      initChart1() {
// 1.实例化对象
        this.myChartOpinionLeaders = echarts.init(document.querySelector(".bar .chart"));
        // 3.把配置项给实例对象
        this.myChartOpinionLeaders.setOption(this.opinionLeadersOption);

        // 4.让图表随屏幕自适应
        window.addEventListener('resize', function () {
          this.myChartOpinionLeaders.resize();
        })
      },
      initChart2() {
// 1.实例化对象
        this.myChartMostActive = echarts.init(document.querySelector(".bar2 .chart"));
        // 2.指定配置项和数据
        // 3.把配置项给实例对象
        this.myChartMostActive.setOption(this.mostActiveOption);

        // 4.让图表随屏幕自适应
        window.addEventListener('resize', function () {
          this.myChartMostActive.resize();
        })
      },
      initChart3() {

        this.myChartSentiments = echarts.init(document.querySelector(".line .chart"));

        this.myChartSentiments.setOption(this.sentimentsOption);

        // 4.让图表随屏幕自适应
        window.addEventListener('resize', function () {
          this.myChartSentiments.resize();
        })
      },
      initChart4() {
        this.myChartMediaType = echarts.init(document.querySelector('.line2 .chart'));

        this.myChartMediaType.setOption(this.mediaTypeOption);

        window.addEventListener('resize', function () {
          this.myChartMediaType.resize();
        })
      },

      initChart6() {
        this.myChartMediaName = echarts.init(document.querySelector('.pie2 .chart'));

        this.myChartMediaName.setOption(this.optionMediaName);
        window.addEventListener('resize', function () {
          this.myChartMediaName.resize();
        })
      },


    },
    created() {
    },
    mounted() {
      //获取事件
      this.getEventsList()
      //柱状图模块1
      this.initChart1()
      //柱状图模块2
      // this.initChart2()
      //折线图模块1
      this.initChart3()
      //折线图模块2
      this.initChart4()
      //饼形图2
      this.initChart6()

    }


  }
</script>

<style lang="scss" scoped>

  .bg {
    background-size: 100% 100%;
    background: url(images/bg.jpg) no-repeat;
    line-height: 1.15;
    height: 100%;
  }

  .header {
    position: relative;
    height: 1.25rem;
    background: url(images/head_bg.png) no-repeat;
    background-size: 100% 100%;
  }

  .header h1 {
    font-size: 0.475rem;
    color: rgba(255, 255, 255, 0.87);
    text-align: center;
    line-height: 1rem;
  }

  .header .show-time {
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
  }


  // input框
  ::v-deep .el-input__inner {
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.50);
    border: none; // 去掉边框
    /*border-color: #XXXXXX // 默认边框的颜色*/
    text-align: left;
    border-radius: 0px;
    height: 40px;
    /*background-size: 100% 100%;*/
    /*background-image: url("../../../assets/images/title_bg.png");*/
    color: #00CCFF;
    font-weight: bold;
    font-size: 16px;
  }

  .zuixin {
    display: flex;
    font-size: 12px;
    color: white;
    line-height: 30px;
  }

  .pulll_left {

  }

  .pulll_center {

    margin-left: 10px;

  }

  .pulll_right {
    width: 260px;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 如果需要，可以使用省略号来表示被截断的文本 */
  }


  // css 初始化

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    // overflow: hidden;
  }

  li {
    list-style: none;
  }

  // 声明字体
  @font-face {
    font-family: electronicFont;
    src: url(font/DS-DIGIT.TTF);
  }


  body {
    background: url(images/bg.jpg) no-repeat top center;
    line-height: 1.15;
  }

  header {
    position: relative;
    height: 1.25rem;
    background: url(images/head_bg.png) no-repeat;
    background-size: 100% 100%;


    h1 {
      font-size: .475rem;
      color: rgba(255, 255, 255, 0.87);
      line-height: 1rem;
    }

    .show-time {
      position: absolute;
      top: 0;
      right: .375rem;
      line-height: .9375rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: .25rem;
    }
  }

  // 页面主体盒子
  .mainbox {
    display: flex;
    min-width: 1024px;
    max-height: 1920px;
    margin: 0 auto;
    padding: .125rem .125rem 0;

    .column {
      flex: 3;
    }

    .column:nth-child(2) {
      flex: 5;
      margin: 0 .125rem .1875rem;
      // 图片旋转有时会超出屏幕最大位置导致滚动条自动上下移动
      overflow: hidden;
    }

    .panel {
      position: relative;
      /*height: 3.875rem;*/
      padding: 0 .1875rem .5rem;
      margin-bottom: .1875rem;
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: url(images/line.png) rgba(255, 255, 255, 0.03);

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: '';
      }

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: '';
      }

      .panel-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: '';
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: '';
        }
      }

      h2 {
        height: .6rem;
        color: #fff;
        line-height: .6rem;
        text-align: center;
        font-size: 0.25rem;
        font-weight: 400;

        a {
          color: rgb(167, 167, 167);
          text-decoration: none;
          margin: 0 .125rem;
        }

      }

      .chart {
        height: 3rem;
      }
    }
  }

  // no数字模块
  .no {
    background-color: rgba(101, 132, 226, 0.1);
    padding: .1875rem;

    .no-hd {
      position: relative;
      border: 1px solid rgba(25, 186, 139, 0.17);

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: .375rem;
        height: .125rem;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
        content: '';
      }

      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: .375rem;
        height: .125rem;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
        content: '';
      }

      ul {
        display: flex;

        li {
          position: relative;
          flex: 1;
          line-height: 1rem;
          font-size: .875rem;
          color: #ffeb7b;
          text-align: center;
          font-family: electronicFont;

          &:first-child::after {
            content: '';
            position: absolute;
            top: 25%;
            right: 0;
            height: 50%;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.3);
          }
        }
      }
    }

    .no-bd {
      ul {
        display: flex;

        li {
          flex: 1;
          text-align: center;
          color: rgba(255, 255, 255, 0.7);
          font-size: .225rem;
          height: .5rem;
          line-height: .5rem;
          padding-top: .125rem;
        }
      }
    }
  }

  .map {
    position: relative;
    height: 10.125rem;

    .map1 {
      width: 6.475rem;
      height: 6.475rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url(images/map.png);
      background-size: 100% 100%;
      opacity: 0.3;
    }

    .map2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8.0375rem;
      height: 8.0375rem;
      background: url(images/lbx.png);
      background-size: 100% 100%;
      animation: rotate1 15s linear infinite;
      opacity: .6;
    }

    .map3 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 7.075rem;
      height: 7.075rem;
      background: url(images/jt.png);
      background-size: 100% 100%;
      animation: rotate2 15s linear infinite;
    }

    .chart {
      position: absolute;
      top: 0;
      left: 0;
      height: 10.125rem;
      width: 100%;
    }

    @keyframes rotate1 {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    @keyframes rotate2 {
      from {
        transform: translate(-50%, -50%) rotate(360deg);
      }

      to {
        transform: translate(-50%, -50%) rotate(0deg);
      }
    }
  }

  /* 约束屏幕尺寸 */
  @media screen and (max-width: 1024px) {
    html {
      font-size: 42px !important;
    }
  }

  @media screen and (min-width: 1920px) {
    html {
      font-size: 80px !important;
    }
  }


</style>




